<page-header></page-header>

<mat-card>
  <mat-tab-group mat-stretch-tabs="false">
    <mat-tab label="Material">
      <div class="row no-gutters">
        <div class="col-sm-6">
          <mat-list>
            <h3 matSubheader>Typography</h3>

            <mat-list-item><code>.mat-headline-1</code></mat-list-item>
            <mat-list-item><code>.mat-headline-2</code></mat-list-item>
            <mat-list-item><code>.mat-headline-3</code></mat-list-item>
            <mat-list-item><code>.mat-headline-4</code></mat-list-item>
            <mat-list-item><code>.mat-h1</code>, <code>.mat-headline-5</code></mat-list-item>
            <mat-list-item><code>.mat-h2</code>, <code>.mat-headline-6</code></mat-list-item>
            <mat-list-item><code>.mat-h3</code>, <code>.mat-subtitle-1</code></mat-list-item>
            <mat-list-item><code>.mat-h4</code>, <code>.mat-body-1</code></mat-list-item>
            <mat-list-item><code>.mat-h5</code></mat-list-item>
            <mat-list-item><code>.mat-h6</code></mat-list-item>
            <mat-list-item><code>.mat-body</code>, <code>.mat-body-2</code></mat-list-item>
            <mat-list-item><code>.mat-body-strong</code>,
              <code>.mat-subtitle-2</code></mat-list-item>
            <mat-list-item><code>.mat-small</code>, <code>.mat-caption</code></mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6">
          <mat-list>
            <h3 matSubheader>Elevation</h3>
            <ng-container *ngFor="let i of [0,1,2,3]">
              <mat-list-item *ngFor="let j of [1,2,3,4,5,6]">
                <code>.mat-elevation-z{{j+6*i}}</code>
              </mat-list-item>
            </ng-container>
          </mat-list>
        </div>
      </div>
    </mat-tab>

    <mat-tab label="Colors">
      <div class="row no-gutters">
        <div>
          <mat-list>
            <h3 matSubheader>Background/Border/Text Color</h3>
            <mat-list-item *ngFor="let i of colorNames">
              <code>.[bg|border|text]-{{i}}-[{{colorHues}}]</code>
            </mat-list-item>
            <mat-list-item *ngFor="let c of ['white','black','light','dark']">
              <code>.[bg|border|text]-{{c}}</code>
            </mat-list-item>
          </mat-list>
        </div>
      </div>
    </mat-tab>

    <mat-tab label="Layout">
      <div class="row no-gutters">
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Position</h3>
            <mat-list-item *ngFor="let i of ['static','fixed','absolute','relative','sticky']">
              <code>.{{i}}</code>
            </mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Display</h3>
            <mat-list-item *ngFor="let i of ['block','inline-block','inline',
            'flex','inline-flex','none']">
              <code>.d-{{i}}</code>
            </mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Flexbox (Direction)</h3>
            <mat-list-item *ngFor="let i of ['row','row-reverse','col','col-reverse']">
              <code>.flex-{{i}}</code>
            </mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Flexbox (Fill & Grow & shrink)</h3>
            <mat-list-item>
              <code>.flex-fill</code>
            </mat-list-item>
            <mat-list-item *ngFor="let i of ['grow-0','grow-1']">
              <code>.flex-{{i}}</code>
            </mat-list-item>
            <mat-list-item *ngFor="let i of ['shrink-0','shrink-1']">
              <code>.flex-{{i}}</code>
            </mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Flexbox (Wrap)</h3>
            <mat-list-item *ngFor="let i of ['wrap','nowrap','wrap-reverse']">
              <code>.flex-{{i}}</code>
            </mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Flexbox (Justify content)</h3>
            <mat-list-item *ngFor="let i of ['start','end','center','between','around']">
              <code>.justify-content-{{i}}</code>
            </mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Flexbox (Align content)</h3>
            <mat-list-item *ngFor="let i of ['start','end','center','between','around','stretch']">
              <code>.align-content-{{i}}</code>
            </mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Flexbox (Align items)</h3>
            <mat-list-item *ngFor="let i of ['start','end','center','baseline','stretch']">
              <code>.align-items-{{i}}</code>
            </mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Flexbox (Align self)</h3>
            <mat-list-item *ngFor="let i of ['auto','start','end','center','baseline','stretch']">
              <code>.align-self-{{i}}</code>
            </mat-list-item>
          </mat-list>
        </div>
      </div>
    </mat-tab>

    <mat-tab label="Spacings">
      <div class="row no-gutters">
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Margin</h3>
            <mat-list-item *ngFor="let i of [0,4,8,16,24,32,48,'auto']">
              <code>.m[-[t|b|r|l|x|y]]-{{i}}</code>
            </mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Negative Margin</h3>
            <mat-list-item *ngFor="let i of [4,8,16,24,32,48]">
              <code>.m[-[t|b|r|l|x|y]]--{{i}}</code>
            </mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Padding</h3>
            <mat-list-item *ngFor="let i of [0,4,8,16,24,32,48]">
              <code>.p[-[t|b|r|l|x|y]]-{{i}}</code>
            </mat-list-item>
          </mat-list>
        </div>
      </div>
    </mat-tab>

    <mat-tab label="Border">
      <div class="row no-gutters">
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Border</h3>
            <mat-list-item *ngFor="let i of [0,1,2,3,4,5]">
              <code>.b[-[t|b|r|l|x|y]]-{{i}}</code>
            </mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Border Width</h3>
            <mat-list-item *ngFor="let i of [0,1,2,3,4,5]">
              <code>.border[-[t|b|r|l|x|y]]-{{i}}</code>
            </mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-12 col-md-6">
          <mat-list>
            <h3 matSubheader>Border Style</h3>
            <mat-list-item *ngFor="let i of ['solid','dashed','dotted','double','hidden','none']">
              <code>.border[-[t|b|r|l|x|y]]-{{i}}</code>
            </mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-12 col-md-6">
          <mat-list>
            <h3 matSubheader>Border Radius</h3>
            <mat-list-item *ngFor="let i of [0,4,8,16,24,32,'full']">
              <code>.r[-[t|b]-[r|l]]-{{i}}, r[-[t|b|l|r]]-{{i}}</code>
            </mat-list-item>
          </mat-list>
        </div>
      </div>
    </mat-tab>

    <mat-tab label="Size">
      <div class="row no-gutters">
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Width (%)</h3>
            <mat-list-item *ngFor="let i of [20,25,40,50,60,75,80,'full','auto']">
              <code>.w-{{i}}</code>
            </mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Height (%)</h3>
            <mat-list-item *ngFor="let i of [20,25,40,50,60,75,80,'full','auto']">
              <code>.h-{{i}}</code>
            </mat-list-item>
          </mat-list>
        </div>
      </div>
    </mat-tab>

    <mat-tab label="Text">
      <div class="row no-gutters">
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Font Weight</h3>
            <mat-list-item *ngFor="let i of [1,2,3,4,5,6,7,8,9]">
              <code>.f-w-{{i*100}}</code>
            </mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Font Size</h3>
            <mat-list-item *ngFor="let i of [0,10,12,14,16,18,20]">
              <code>.f-s-{{i}}</code>
            </mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Font Style</h3>
            <mat-list-item><code>.font-italic</code></mat-list-item>
            <mat-list-item><code>.font-normal</code></mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Text Align</h3>
            <mat-list-item><code>.text-center</code></mat-list-item>
            <mat-list-item><code>.text-right</code></mat-list-item>
            <mat-list-item><code>.text-left</code></mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Text Decoration</h3>
            <mat-list-item><code>.text-none</code></mat-list-item>
            <mat-list-item><code>.text-underline</code></mat-list-item>
            <mat-list-item><code>.text-line-through</code></mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Text Transform</h3>
            <mat-list-item><code>.text-capitalize</code></mat-list-item>
            <mat-list-item><code>.text-uppercase</code></mat-list-item>
            <mat-list-item><code>.text-lowercase</code></mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>White Space</h3>
            <mat-list-item><code>.text-normal</code></mat-list-item>
            <mat-list-item><code>.text-nowrap</code></mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Word Wrap</h3>
            <mat-list-item><code>.text-break</code></mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Text Overflow</h3>
            <mat-list-item><code>.text-ellipsis</code></mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Color</h3>
            <mat-list-item><code>.text-reset</code></mat-list-item>
            <mat-list-item><code>.text-current</code></mat-list-item>
          </mat-list>
        </div>
      </div>
    </mat-tab>

    <mat-tab label="Misc">
      <div class="row no-gutters">
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Vertical Align</h3>
            <mat-list-item *ngFor="let i of ['top','middle','bottom']">
              <code>.align-{{i}}</code>
            </mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Cursor</h3>
            <mat-list-item *ngFor="let i of ['default','pointer','text',
            'move','copy','not-allowed']">
              <code>.cursor-{{i}}</code>
            </mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>User Select</h3>
            <mat-list-item *ngFor="let i of ['all','auto','none']">
              <code>.select-{{i}}</code>
            </mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Pointer Events</h3>
            <mat-list-item><code>.pointer-events-none</code></mat-list-item>
            <mat-list-item><code>.pointer-events-auto</code></mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Overflow</h3>
            <mat-list-item *ngFor="let i of ['auto','hidden','visible','scroll']">
              <code>.overflow[-[x|y]]-{{i}}</code>
            </mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Object Fit</h3>
            <mat-list-item *ngFor="let i of ['cover','contain','fill','none','scale-down']">
              <code>.object-{{i}}</code>
            </mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Object Position</h3>
            <mat-list-item *ngFor="let i of ['top','bottom','center','left','left-top',
            'left-right','right','right-top','right-bottom']">
              <code>.object-{{i}}</code>
            </mat-list-item>
          </mat-list>
        </div>
        <div class="col-sm-6 col-md-3">
          <mat-list>
            <h3 matSubheader>Icon Size</h3>
            <mat-list-item *ngFor="let i of [18,24,36,48]">
              <code>.icon-{{i}}</code>
            </mat-list-item>
          </mat-list>
        </div>
      </div>
    </mat-tab>
  </mat-tab-group>
</mat-card>
